<script setup lang="ts">
import {
  zhCN,
  enUS,
  dateZhCN,
  dateEnUS,
  darkTheme,
  lightTheme,
} from "naive-ui";
import LoginModal from "./components/login/modal.vue";
import { useRoute, useRouter } from "vue-router";
import { onMounted, ref } from "vue";
import { useDark, useToggle } from "@vueuse/core";
import { useI18n } from "vue-i18n";
import { getUserInfo } from "@/api";
import { useUserStore } from "@/store/user";
import { useMainStore } from "./store";
const { locale } = useI18n();
const localeMap = {
  zh: {
    locale: zhCN,
    date: dateZhCN,
  },
  en: {
    locale: enUS,
    date: dateEnUS,
  },
};
const route = useRoute();
const userStore = useUserStore();
const isDark = ref(useDark());
const mainStore = useMainStore();
onMounted(() => {
  // isDark.value = true;
  window["route"] = route;
  window["router"] = useRouter();
  window["mainStore"] = mainStore;
});
</script>

<template>
  <div class="app">
    <n-config-provider
      :theme="isDark ? darkTheme : lightTheme"
      :locale="localeMap[locale].locale"
      :date-locale="localeMap[locale].date"
    >
      <n-message-provider>
        <n-dialog-provider>
          <n-modal-provider>
            <router-view></router-view>
            <LoginModal></LoginModal>
          </n-modal-provider>
        </n-dialog-provider>
      </n-message-provider>
    </n-config-provider>
  </div>
</template>

<style scoped></style>
